---
title: "Separator"
description: A minimalist divider used to create visual distinction between content sections, improving readability and organization.
order: 3
published: true
references: ["https://react-spectrum.adobe.com/react-aria/useSeparator.html"]
---

## Basic
Sometimes you need a separator to separate content. This component is a simple wrapper around the `Separator` component from `react-aria-components`. It's a breeze to use.

<How isCenter={false} toUse="surfaces/separator/separator-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/separator
```

## Manual installation
```bash
npm i react-aria-components
```
<SourceCode toShow='separator'/>

## Anatomy
```
import { Separator } from "@/components/ui/separator"

<Separator orientation='vertical | horizontal' />
```

## Orientation
Separator has two orientations: `horizontal` and `vertical`. The default is `horizontal`.

<How toUse="surfaces/separator/separator-orientation-demo" />
